巴哈場外休憩區B頁爬蟲 - 文章瀑布流

應該不少場外老巴友都知道，巴哈場外有分成B頁和C頁
B頁是標題列表，也就是你各位整天縮在電腦前瘋狂刷新的宅宅小世界

我自己滑場外是比較常用列表樣式，但縮圖樣式顯示的資訊會比較多
瀑布流的文章塊資料主要就是從縮圖排版抓的
接下來要說的是 JS 怎麼做到把別站的內容爬到自己這邊來

Axios ＆ Cheerio（去置頂 / 去廣告）

AJAX == Asynchronous JavaScript and XML
它是 JS 非同步請求的技術 ：
我跟和伺服器要了資料後，不需要等待結果，程式仍然繼續做其他事，對面把結果傳回來給我之後，就放進當下頁面裡

而 Axios 是一個實現非同步請求的套件，這是構成專案最重要的一部份，沒有它我拿不到巴哈的HTML

當然，用爬HTML的方式來實現巴哈瀑布流也有一個非常致命的缺點
就是當巴哈官方又在更新些有的沒的時，原站的HTML結構若是改動，可能我這邊也得修改
甚至最慘會出現前功盡棄，需要重新分析編寫架構的狀況

Cheerio 則是一個參照 Jquery 設計的套件，它們 API 極其相似，但 Cheerio 並不代表 Jquery
簡單地說：Cheerio 能做很多 Jquery 能做的事情，但 Jquery 能做的事情 Cheerio 並不一定都能做

現在我們來爬蟲：（這張截圖是很早期的開發畫面，現在改了很多，但已經足夠表示）

眾所周知，巴哈把廣告塞在文章列表裡面，所以爬蟲一定會爬到：

列表總共30篇文章，爬回的總數卻是31，然後第10個元素一定是空陣列
這是什麼？ 是 Sega 的 money 阿

那麼...怎麼把 站長的生財工具 廣告給去掉呢？ ──── Cheerio！
除了廣告之外，我們也該把置頂文章給去掉，畢竟不會有人想到重複看到特定文章：

這段什麼意思？
「如果標題不是空的（廣告）、如果沒有置頂標籤（板務文）、如果沒有精華標籤（精華+板務文），
那麼就爬回來我這邊。」

這是一個很基礎的資料篩選，你要什麼、不要什麼，都可以這樣子搞定

chcp 65001

有沒有發現上面那張截圖，底下終端機印出來的東西都是亂碼？

阿，這個搞得我很崩潰，因為我很確定爬到的都是對的資料，最後發現是文字編碼設定問題
去 package.json 加入 "start": "chcp 65001" ，就會正常顯示中文字了
chcp 是 windows cmd 的指令，65001 則是指示 cmd 換成中文顯示環境

React Hook ＆ 為什麼棄用 Class Component

React 元件分成兩種：Class Component 與 Function Component
事情是這樣的：原本只有 Function Component ，但大家非常需要的一個功能「State」隨著 Class Component 問世了，於是開發者們紛紛把專案轉成編寫 Class Component

就在大家覺得情況大致底定了之後，事情又有了變化：
官方發布了新的功能「Hook」，讓你不必寫 Class Component 就能使用 state 以及其他 React 的功能
然後他們宣布 Hook 只能在 Function Component 裡面用

......整人？ 已經用 Class Component 寫了87%的大專案，是不可能給他這樣瞎折騰
React 也可能發現這操作造成不少疑問，特別發布了一篇 Q&A
他們的論調是說：希望大家以後開發新專案的時候，再改成使用 Function Component

Function Component 寫法少很多，可讀性比較高
在 React Hook 問世之後，兩者有了相同的功能，Function Component 卻在程式碼可讀性上勝出
只能說 Hook 出現得太晚，給開發者一種被整的感覺，一個歷史債的概念
我應該是不會回去用 Class Component 了，相信 Function Component 也會回歸主流寫法